layui.use(['table','layer','jquery'], function(){
    var table = layui.table;
    var layer = layui.layer;
    var $ = layui.$;

    //第一个实例
    table.render({
        elem: '#demo'
        ,url: 'http://api.shopping.com/api/item/brand/list' //数据接口
        ,page: true //开启分页
        ,limit:5 //每一页显示5条数据
        ,limits:[1,2,3,5,10,20,30,50] //列表显示的每一页显示的条数
        ,toolbar:"default" //显示工具头信息
        ,cols: [[ //表头
            {field: 'no', type:"checkbox", width:80, sort: true, fixed: 'left'}
            ,{field: 'id', title: '品牌编号',align:"center", width:"10%"}
            ,{field: 'name', title: '品牌名称',align:"center", width:"20%", sort: true}
            ,{field: 'image', title: '图标',align:"center", width:"20%",templet:"#photo"}
            ,{field: 'letter', title: '首字母',align:"center", width:"20%"}
            ,{field: 'op', title: '操作',align:"center", width:"20%",templet:"#barDemo"}
        ]]
    });

    /*********行工具条监听************/
    //监听行工具事件
    table.on('tool(test)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
        var data = obj.data //获得当前行数据
            ,layEvent = obj.event; //获得 lay-event 对应的值
        if(layEvent === 'detail'){
            layer.msg('查看操作');
        } else if(layEvent === 'del'){
            layer.confirm('真的删除行么', function(index){
                obj.del(); //删除对应行（tr）的DOM结构
                layer.close(index);

                //获得要删除的这一行数据，对应的id
                var id = data.id;
                //发出ajax请求，调用后台微服务，执行删除操作
                $.ajax({
                    url:"http://api.shopping.com/api/item/brand/del",
                    type:"delete",
                    data:{"id":id},
                    success:function () {
                        layer.alert("品牌删除成功！");
                    }
                });

            });
        } else if(layEvent === 'edit'){
            layer.msg('编辑操作');
        }
    });
    /*****************头部工具条的监听事件*************************************/
//监听头工具栏事件
    table.on('toolbar(test)', function(obj){
        var checkStatus = table.checkStatus(obj.config.id)
            ,data = checkStatus.data; //获取选中的数据
        switch(obj.event){
            case 'add':
                layer.open({
                    type: 2,
                    shade: true,
                    area: ['600px','400px'],
                    maxmin: false,
                    anim:1,
                    title:"添加数据",
                    content:'/forward/saveBrand',
                    zIndex: layer.zIndex, //重点1
                    success: function(layero){
                        layer.setTop(layero); //重点2
                    }
                });

                break;
            case 'update':

                break;
            case 'delete':

                break;
        };
    });


});